<script setup lang="ts">
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
import { FileUtil } from '@utils/object-util'

const props = withDefaults(defineProps<{
  img: string,
  aspectRatio?: number
  compress?: { width?: number, height?: number, scale?: number },
  shape?: 'rect' | 'circle'
}>(), {
  shape: 'rect'
})

onMounted(() => {
  // --
})
function clip (fileName: string) {
  return new Promise((resolve, reject) => {
    cropper.getBlob().then((blob) => {
      if (props.compress) {
        FileUtil.compressImage({ ...props.compress, data: blob, fileName }).then((file) => {
          resolve(file)
        }).catch(reject)
      } else {
        resolve(new File([blob], fileName))
      }
    }).catch(reject)
  })
}

defineExpose({ clip })

</script>

<template>
  <vue-picture-cropper
    class="yk-picture-cropper" :class="[ props.shape + '-cropper']"
    :img="props.img"
    :options="{ viewMode: 1, dragMode: 'crop', aspectRatio: props.aspectRatio }"
  />
</template>

<style scoped lang="scss">
:deep.yk-picture-cropper {
  &.circle-cropper {
    .cropper-view-box {
      border-radius: 50%;
    }
  }
}
</style>
